<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/login.css"/>
    <link rel="stylesheet" type="text/css" href="/layui/css/layui.css"/>
</head>
<body>
<!-------------------login-------------------------->
<div class="login">
    <form method="post" id="loginForm" class="layui-form">
        <p>用户名：<input type="text" name="username" id="username" placeholder="用户名" lay-verify="required"></p>
        <p>密码：<input type="password" name="password" id="password" placeholder="密码" lay-verify="required"></p>
        <p class="txtL txt"><input class="code" type="text" name="checkcode" id="code" placeholder="验证码"
                                   style="width: 154px;" lay-verify="required"><img style="position: relative;"
                                                                                    id="checkImage"
                                                                                    onclick="initCode()"></p>
        <p><input type="submit" lay-submit lay-filter="login" value="登  录"></p>
        <p class="txt"><a class="" href="/index">去首页</a><a class="" href="register">免费注册</a><a href="forget">忘记密码？</a>
        </p>
    </form>
</div>

</body>
<script src="/js/jquery-1.12.4.min.js"></script>
<script src="/layui/layui.js"></script>
<script src="/layui/layui.all.js" charset="utf-8"></script>

<script>

    $("#loginForm").submit(function () {
        $.ajax({
            type: 'post',
            url: "/user/login",
            dataType: "json",
            data: $("#loginForm").serialize(),
            success: function (data) {
                if (data.code === 200) {
                    layer.msg("登录成功", {time: 2000, offset: '100px', icon: 1});
                    location.href = "/index";
                } else {
                    layer.msg(data.message, {offset: '100px', icon: 2});
                    initCode();
                }
            },
        });
        return false;
    })
    $(function () {
        initCode();
    })

    function initCode() {
        $('#checkImage').attr("src", "/images/captcha?data=" + new Date().getTime());
    }
</script>

</html>
